<template>
    <div style="width:100%; height: 100vh;background-color: #2a5caa;overflow: hidden;">
        <div style="width:400px; margin:80px auto;">
            <div style="color: #cccccc; font-size: 30px; text-align: center;margin-bottom: 20px;">
                注册登录
            </div>
            <el-form ref="formLogin" :model="formLogin" :rules="formRules" class="demo-form-inline">
                <el-form-item prop="userName">
                    <el-input prefix-icon="Avatar" v-model="formLogin.userName" placeholder="用户名">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input  prefix-icon="Key" v-model="formLogin.password"
                               show-password="true" placeholder="密 码"></el-input>
                </el-form-item>
                <el-form-item prop="rePassword">
                    <el-input  prefix-icon="Key" v-model="formLogin.rePassword"
                               show-password="true" placeholder="确认密码"></el-input>
                </el-form-item>
                <el-form-item prop="email">
                    <el-input  prefix-icon="Key" v-model="formLogin.email"
                               placeholder="邮箱"></el-input>
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input  prefix-icon="Key" v-model="formLogin.phone"
                               placeholder="联系电话"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="handleReg()"  style="width: 70%;">确认注册</el-button>
                    <el-button type="primary"  @click="backSubmit()"  style="width: 26%;">返回登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { Avatar } from "@element-plus/icons";
    import { Key } from "@element-plus/icons";
    import request from "../../utils/request";
    import CryptoJS from 'crypto-js'
    import {ElMessage} from "element-plus"; //加密js

    export default{
        name:'Login',
        components: {
            Avatar,
            Key
        },
        data(){
            return{
                formRules:{
                    userName:'',
                    password:'',
                },
                formLogin:{},
                formRules:{
                    userName:[
                        {required:true,message:"用户名不能为空",trigger:"blur"}
                    ],
                    password:[
                        {required:true,message:"密码不能为空",trigger:"blur"}
                    ]
                },

            }
        },
        created(){

        },
        methods:{
            //登录方法
            handleReg() {
                // //登录请求
                request.post("/api/user/sys/register",this.formLogin).then(resp=>{
                    if(resp.status =="M0200"){
                        ElMessage({
                            message:resp.msg,
                            type:"success"

                        })
                    }else{
                        //提示
                        ElMessage({
                            message:resp.msg,
                            type:"error"
                        })
                    }
                })
            },
            backSubmit(){
                this.$router.push('/login');
            },
        }

    }
</script>
